<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong> {{ sum }} </strong></span>
		<ul class="filters">
			<li>
				<a  href="javascript:;"
				:class="{selected: type === 'all'}"
				@click="changeDone('all')"
				>全部</a>
			</li>
			<li>
				<a href="javascript:;"
				:class="{selected: type === 'active'}"
				@click="changeDone('active')"
				>未完成</a>
			</li>
			<li>
				<a href="javascript:;"
				:class="{selected: type === 'complete'}"
				@click="changeDone('complete')"
				>已完成</a>
			</li>
		</ul>
		<button class="clear-completed" @click="clearFn">清除已完成</button>
	</footer>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		methods:{
			...mapMutations('todos',[
					'clearFn',
					'changeDone'
			])
		},

		computed: {
			...mapState("todos", ['type']),
			...mapGetters("todos", [
						'sum'
				])
		}
	}
</script>
